<template>
  <div id="overviewDom">
    <div id="filterDom">
      <div>
        <label for="">时间：</label>
        <el-date-picker
          v-model="month"
          value-format="YYYY-MM"
          type="month"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div class="search">
        <el-button type="primary" @click="getOverviewData(1)">查询</el-button>
      </div>
    </div>
    <div id="overviewList">
      <ul>
        <li @click="jumpPage('tax')">
          <p class="title">个税审核</p>
          <div>
            <span>已通过无风险人数:</span>
            <b>{{ overViewData.persionTax.notRisk }}</b>
          </div>
          <div>
            <span>已通过本省存在异常报税人数:</span>
            <b>{{ overViewData.persionTax.innerPro }}</b>
          </div>
          <div>
            <span>已通过外省异常报税人数:</span>
            <b>{{ overViewData.persionTax.outerPro }}</b>
          </div>
          <div>
            <span>未通过人数:</span>
            <b>{{ overViewData.persionTax.fail }}</b>
          </div>
          <div>
            <span>待审核人数:</span>
            <b>{{ overViewData.persionTax.auditWaitPassCount }}</b>
          </div>
          <div id="echart1"></div>
        </li>
        <li @click="jumpPage('salary')">
          <p class="title">薪资统计</p>
          <div>
            <span>已上传人数:</span>
            <b>{{ overViewData.salary.uploaded }}</b>
          </div>
          <div>
            <span>未上传人数:</span>
            <b>{{ overViewData.salary.notUploaded }}</b>
          </div>
          <div id="echart2"></div>
        </li>
        <li @click="jumpPage('risk')">
          <p class="title">风险人员</p>
          <div>
            <span>风险人员总数:</span>
            <b>{{ overViewData.risk.riskNum }}</b>
          </div>
          <div>
            <span>&nbsp;</span>
            <b></b>
          </div>
          <div>
            <span>&nbsp;</span>
            <b></b>
          </div>
          <div>
            <span>&nbsp;</span>
            <b></b>
          </div>
          <div id="echart3"></div>
        </li>
        <li @click="jumpPage('sign')">
          <p class="title">打卡统计</p>
          <div>
            <span>总人数:</span>
            <b>{{ overViewData.sign.signAll }}</b>
          </div>
          <div>
            <span>已注册人数:</span>
            <b>{{ overViewData.sign.registered }}</b>
          </div>
          <div>
            <span>未注册人数:</span>
            <b>{{ overViewData.sign.notRegistered }}</b>
          </div>
          <div>
            <span>已打卡人数:</span>
            <b>{{ overViewData.sign.signed }}</b>
          </div>
          <div id="echart4"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import axios from "@/utils/axios";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
const emit = defineEmits(["jumpPage"]);
const router = useRouter();
const month = ref("");
const getMonth = () => {
  var date = new Date();
  var year = date.getFullYear();
  var monthNum = Number(date.getMonth()) + 1;
  var monthZero = monthNum < 10 ? "0" + monthNum : monthNum;
  month.value = year + "-" + monthZero;
};

const overViewData = reactive({
  persionTax: {
    notRisk: 0, // 无风险
    innerPro: 0, // 省内异常
    outerPro: 0, // 省外异常
    fail: 0, // 未通过
    auditWaitPassCount: 0,
  },
  salary: {
    uploaded: 0, // 已上传
    notUploaded: 0, // 未上传
  },
  risk: {
    riskNum: 0, // 风险人员
  },
  sign: {
    signAll: 0, // 总人数
    registered: 0, // 已注册
    notRegistered: 0, // 未注册
    signed: 0, // 已打卡
  },
});
const jumpPage = (data) => {
  console.log("[ data ] >", data);
  if (data == "tax") {
    var index = 1;
  } else if (data == "salary") {
    var index = 4;
  } else if (data == "risk") {
    var index = 2;
  } else {
    var index = 3;
  }
  sessionStorage.date = month.value;
  emit("jumpPage", index); // 提交到主页
};

const getOverviewData = (isUserSearh) => {
  axios
    .post("api/index/index", {
      date: month.value, // 月份
    })
    .then((res) => {
      if (res.status == 200) {
        overViewData.persionTax.notRisk = res.data.auditPassCount;
        overViewData.persionTax.innerPro = res.data.auditPassLocalCount;
        overViewData.persionTax.outerPro = res.data.auditPassOutCount;
        overViewData.persionTax.fail = res.data.auditNotPassCount;
        overViewData.persionTax.auditWaitPassCount = res.data.auditWaitPassCount;

        overViewData.salary.uploaded = res.data.salaryUpCount;
        overViewData.salary.notUploaded = res.data.salaryNotUpCount;

        overViewData.sign.signAll = res.data.clockTotalCount;
        overViewData.sign.registered = res.data.clockRegisterCount;
        overViewData.sign.notRegistered = res.data.clockNotRegisterCount;
        overViewData.sign.signed = res.data.clockFinishCount;
        overViewData.risk.riskNum = res.data.riskCount;
        // 开始绘制
        setRiskEcharts();
        setSalaryEcharts();
        setSignEcharts();
        setRisksPersonEcharts();
        if (isUserSearh) {
          ElMessage.success("查询完成");
        }
      }
    })
    .catch((res) => {});
};
// 构建表格
const setRiskEcharts = () => {
  var serverData = [
    overViewData.persionTax.notRisk,
    overViewData.persionTax.innerPro,
    overViewData.persionTax.outerPro,
    overViewData.persionTax.fail,
    overViewData.persionTax.auditWaitPassCount
  ];
  // 基于准备好的dom，初始化echarts实例
  let myChart1 = echarts.getInstanceByDom(document.getElementById("echart1"))
  if(myChart1) {
    myChart1.dispose();
  }
  var myChart = echarts.init(document.getElementById("echart1"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "",
    },
    colorBy: "data",
    tooltip: {},
    xAxis: {
      data: [
        "已通过无风险",
        "已通过本省存在异常",
        "已通过外省异常",
        "未通过",
        "待审核"
      ],
      axisLabel: {
        fontSize: 10,
      },
    },
    yAxis: {},
    series: [
      {
        name: "个税审核",
        type: "bar",
        data: serverData,
        barWidth: 30,
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  });
};
const setSalaryEcharts = () => {
  var serverData = [
    {
      name: "已上传",
      value: overViewData.salary.uploaded,
    },
    {
      name: "未上传",
      value: overViewData.salary.notUploaded,
    },
  ];
  // 基于准备好的dom，初始化echarts实例
  let myChart1 = echarts.getInstanceByDom(document.getElementById("echart2"))
  if(myChart1) {
    myChart1.dispose();
  }
  var myChart = echarts.init(document.getElementById("echart2"));
  // 绘制图表
  myChart.setOption({
    title: {
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "薪资统计",
        type: "pie",
        radius: "50%",
        label: {
          show: true,
          formatter(param) {
            return param.name + " (" + param.value + "人)";
          },
        },
        data: serverData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};
const setSignEcharts = () => {
  var serverData = [
    overViewData.sign.signAll,
    overViewData.sign.registered,
    overViewData.sign.notRegistered,
    overViewData.sign.signed,
  ];
  // 基于准备好的dom，初始化echarts实例
  let myChart1 = echarts.getInstanceByDom(document.getElementById("echart4"))
  if(myChart1) {
    myChart1.dispose();
  }
  var myChart = echarts.init(document.getElementById("echart4"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "",
    },
    colorBy: "data",
    color: [
      "#5470c6",
      "#91cc75",
      "#ee6666",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
    ],
    tooltip: {},
    xAxis: {
      data: ["总人数", "已注册", "未注册", "已打卡"],
      axisLabel: {
        fontSize: 10,
      },
    },
    yAxis: {},
    series: [
      {
        name: "打卡统计",
        type: "bar",
        data: serverData,
        barWidth: 30,
        label: {
          show: true,
          position: "top",
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  });
};
const setRisksPersonEcharts = () => {
  var serverData = [
    {
      name: "风险人员",
      value: overViewData.risk.riskNum,
    }
  ];
  // 基于准备好的dom，初始化echarts实例
  let myChart1 = echarts.getInstanceByDom(document.getElementById("echart3"))
  if(myChart1) {
    myChart1.dispose();
  }
  var myChart = echarts.init(document.getElementById("echart3"));
  // 绘制图表
  myChart.setOption({
    title: {
      left: "center",
    },
    color: ["#ee6666"],
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "风险人员",
        type: "pie",
        radius: "50%",
        label: {
          show: true,
          formatter(param) {
            return param.name + " (" + param.value + "人)";
          },
        },
        data: serverData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};


const isLoginTime = ref();
const isLogin = () => {
  if (sessionStorage.time) {
    var nowDate = new Date().getTime();
    if (Number(nowDate) - Number(sessionStorage.time) > 2 * 60 * 60 * 1000) {
      ElMessageBox.alert("登录过期", "提示", {
        confirmButtonText: "重新登陆",
        callback: (action) => {
          router.push({
            name: "login",
          });
        },
      });
    } else {
      // console.log("检验成功，没有超时")
      isLoginTime.value = setTimeout(() => {
        isLogin();
      }, 60 * 1000);
    }
  } else {
    clearTimeout(isLoginTime.value);
    ElMessageBox.alert("请重新登录", "提示", {
      confirmButtonText: "重新登陆",
      callback: (action) => {
        router.push({
          name: "login",
        });
      },
    });
  }
};
onMounted(() => {
  isLogin();
  getMonth(); // 先获取年月
  getOverviewData();
});
onUnmounted(() => {
  clearTimeout(isLoginTime.value);
});
</script>
<style lang="scss" scoped>
#overviewDom {
  height: 100%;
}

#filterDom {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
  .status,
  .search {
    margin-left: 12px;
  }

  .name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 256px;
    margin-right: 12px;

    .el-input {
      width: 220px;
    }
  }
}

#overviewList {
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 20px;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 50%;
      .title {
        font-size: 20px;
        border-left: 5px solid #409eff;
        padding-left: 10px;
        font-weight: bold;
      }
      div {
        margin-top: 5px;
        span {
          font-size: 16px;
        }
        b {
          font-size: 16px;
          font-weight: 900;
          margin-left: 3px;
        }
      }
      #echart1 {
        width: 100%;
        height: calc(100% - 120px);
      }
      #echart2 {
        width: 100%;
        height: calc(100% - 120px);
      }
      #echart3 {
        width: 100%;
        height: calc(100% - 120px);
      }
      #echart4 {
        width: 100%;
        height: calc(100% - 120px);
      }
    }
  }
}

#pageDom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialogDiv {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
